<template>
  <div class="Descriptions">
    <el-descriptions :title="title" :column="column" border>
      <el-descriptions-item
        :label="item.label"
        v-for="(item, index) in items"
        :key="index"
        labelClassName="labelClassName"
        contentClassName="contentClassName"
        >{{ item.value }}</el-descriptions-item
      >
    </el-descriptions>
  </div>
</template>

<script>
export default {
  name: 'Descriptions',
  props: {
    title: {
      type: String,
      default: '标题'
    },
    column: {
      type: Number,
      default: 3
    },
    items: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style lang="scss" scoped>
.Descriptions {
  ::v-deep .el-descriptions-row {
    .labelClassName {
      width: 10%;
    }
    .contentClassName {
      width: 20%;
    }
  }
}
</style>
